<template>
	<view>
		<u--form errorType="toast" :model="form" ref="myForm" :rules="rules" labelWidth="80">
			<u-form-item label="手机号码" prop="phone" borderBottom>
				<u-input v-model="form.phone" border="none" type="number" placeholder="请填写" inputAlign="right" @blur="onVerify" />
			</u-form-item>
			<u-form-item label="员工头像" borderBottom v-if="type==='2'">
				<div class="flex flex justify-end">
					<view>
						<u-upload 
							:fileList="fileList" 
							:maxCount="1" 
							@delete="deletePic"
							@afterRead="afterRead"
						/>
					</view>
				</div>
			</u-form-item>
			<u-form-item label="员工姓名" prop="trueName" borderBottom>
				<u-input v-model="form.trueName" border="none" placeholder="请填写" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="员工昵称" prop="nickName" borderBottom>
				<u-input v-model="form.nickName" border="none" placeholder="请填写" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="推荐员工" prop="parentName" borderBottom @click="$u.route('/pages/selectPage/staff',{type: '1',canAppointment:0})">
				<u-input v-model="form.parentName" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="所属部门" prop="organizationName" borderBottom @click="$u.route('/pages/selectPage/department')">
				<u-input v-model="form.organizationName" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="员工等级" prop="schemeName" borderBottom @click="$u.route('/pages/customer/staffList', {type: '2', itemType:'12'})">
				<u-input v-model="form.schemeName" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<!-- <u-form-item label="所在地区" prop="area" borderBottom>
				<u-input v-model="form.area" border="none" placeholder="--" inputAlign="right" disabled disabledColor="#fff"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item> -->
			<u-form-item label="选择性别" prop="sex" @click="showSex=true" borderBottom>
				<view class="text-align-right">{{form.sex===1?'男':'女'}}</view>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="员工生日" prop="birthday" borderBottom @click="showBirthday=true">
				<u-input v-model="form.birthday" border="none" placeholder="--" inputAlign="right" disabled disabledColor="#fff"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="兴趣爱好" prop="introduction" borderBottom>
				<u-input v-model="form.introduction" border="none" placeholder="--" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="账号权限" borderBottom>
				<view class="flex" slot="right">
					<view class="flex align-center" @click="onCheck('manageStatus')">
						<uni-icons 
							custom-prefix="iconfont" 
							:type="form.manageStatus===0?'icon-checkbox-square':'icon-checkbox-square-fill'" 
							:color="form.manageStatus===0?'':'#e54d42'" 
							size="30"
						/>
						<text>管理员</text>
					</view>
					<view class="ml-20 flex align-center" @click="onCheck('shopownerStatus')">
						<uni-icons 
							custom-prefix="iconfont" 
							:type="form.shopownerStatus===0?'icon-checkbox-square':'icon-checkbox-square-fill'" 
							:color="form.shopownerStatus===0?'':'#e54d42'" 
							size="30"
						/>
						<text>店长</text>
					</view>
					<view class="ml-20 flex align-center" @click="onCheck('status')">
						<uni-icons 
							custom-prefix="iconfont" 
							:type="form.status===0?'icon-checkbox-square':'icon-checkbox-square-fill'" 
							:color="form.status===0?'':'#e54d42'" 
							size="30"
						/>
						<text>员工</text>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="是否可预约" prop="canAppointment">
				<u-switch slot="right" v-model="form.canAppointment" activeColor="#e54d42"></u-switch>
			</u-form-item>
			<view v-if="type==='1'" class="padding-20 fsize-28 line-gray">Tips: 请确认已线下沟通，提交后将由门店后台审核</view>
		</u--form>
		<view class="padding-30">
			<u-button color="#e54d42" text="保存" @click="submit" size="large" />
		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect" />
		<u-datetime-picker
			mode="date" 
			:show="showBirthday" 
			v-model="bday" 
			:minDate="minDate"
			:maxDate="maxDate"
			:closeOnClickOverlay="true"
			@confirm="onBirthday"
			@cancel="showBirthday=false" 
			@close="showBirthday=false"
		/>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import cDate from '@/common/date.js'
	import getDateTime from '@/common/getDataTime.js'
	export default {
		data() {
			return {
				type: "1",
				showSex: false,
				showBirthday: false,
				minDate:Date.parse(new Date().setFullYear(new Date().getFullYear() - 40)+'T00:00:00+08:00'),
				maxDate:Date.parse(cDate.getDate(0)+'T00:00:00+08:00'),
				actions: [
					{ name: '男', value: 1 },
					{ name: '女', value: 2 },
				],
				form: {
					avatar: '',
					nickName: '',
					phone: '',
					parentId: 0,
					parentName:'',
					birthday:'',
					introduction:'',
					organizationId: '',
					organizationName:'',
					passWord: '000000',
					sex: 1,
					truerName:'',
					area: '',
					schemeId: '',
					schemeName:'',
					canAppointment:true,
					shopownerStatus: 0,
					manageStatus: 0,
					status: 1,
				},
				bday:'',
				fileList: [],
				rules: {
					nickName: [{
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur','change'],
					}]
				}
			}
		},
		onLoad(option) {
			this.type = option.type
			if(this.type === '1'){
				uni.setNavigationBarTitle({
					title: '添加员工'
				});
			}else {
				uni.setNavigationBarTitle({
					title: '编辑信息'
				});
			}
			this.bday = getDateTime.dateTimeStr('y-m-d')
			let that = this
			if (option.id) {
				that.staffid = option.id;
				that.getUserInfo(that.staffid)
			}
			uni.$on('select-staff', obj => {
				this.form.parentId = obj.id
				this.form.parentName = obj.nickName
			})
			uni.$on('select-department', obj => {
				this.form.organizationId = obj.organizationId
				this.form.organizationName = obj.organizationName
			})
			uni.$on('staff-grade', obj => {
				this.form.schemeId = obj.id
				this.form.schemeName = obj.schemeName
				this.$forceUpdate()
			})
			this.form.birthday = getDateTime.dateTimeStr('y-m-d')
		},
		onUnload() {
			uni.$off('select-staff')
			uni.$off('select-department')
			uni.$off('staff-grade')
		},
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			onCheck(aname){
				this.form[aname] = this.form[aname]===0?1:0
			},
			onBirthday(e){
				this.form.birthday = uni.$u.date(e.value, 'yyyy-mm-dd')
				this.showBirthday = false
			},
			onVerify(e){
				if(!uni.$u.test.mobile(e)) return
				if(this.type === '1'){
					this.$reqJsonPost('StoreStaffCheckStaff', {type: 3, phone: e}).then(res=>{		
						if(res.data){
							this.form.nickName = res.data.nickName
							this.form.trueName = res.data.trueName
						}
					}).catch(err=>{
						this.form.phone = ''
					})
				}
			},
			// 删除头像
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.form.avatar = ''
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$reqUpLoad(lists[i].url)
					let item = this.fileList[fileListLen]
					this.form.avatar = result.fileUrl
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fileUrl
					}))
					fileListLen++
				}
			},
			sexSelect(e) {
				this.form.sex = e.value
			},
			getUserInfo(id) {
				this.$reqJsonPost('StoreStaffGetEdit',{id:id}).then(res => {
					this.form = {
						id:res.data.model.id,
						avatar: res.data.model.avatar,
						nickName: res.data.model.nickName,
						phone: res.data.model.phone,
						sex: res.data.model.sex,
						trueName: res.data.model.trueName,
						userName: res.data.model.userName,
						schemeName: res.data.model.schemeName,
						schemeId: res.data.model.schemeId,
						shopownerStatus: res.data.model.shopownerStatus,
						manageStatus: res.data.model.manageStatus,
						status: res.data.model.status,
						canAppointment: res.data.model.canAppointment,
						parentId: res.data.model.parentId,
						parentName:res.data.model.parentName||'',
						organizationName: res.data.model.organizationName || '',
						organizationId: res.data.model.organizationId,
						introduction: res.data.model.introduction,
						birthday: res.data.model.birthday?res.data.model.birthday.slice(0, 10):'',
						area: '',
					}
					this.bday = res.data.model.birthday?res.data.model.birthday.slice(0, 10):''
					this.fileList = [{
						url: res.data.model.avatar
					}]
				})
			},
			submit() {
				let that = this;
				that.$refs.myForm.validate().then(res => {
					if(that.type === '2'){
						that.$reqJsonPost('StaffDoEdit', that.form).then(res => {
							if (res.code === 0) {
								that.$refs.uToast.show({
									message: res.msg,
									complete() {
										uni.$emit('upStaffList', true)
										uni.navigateBack()
									}
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						})
					}else {
						that.$reqJsonPost('StaffDoCreate', that.form).then(res=>{
							if (res.code === 0) {
								that.$refs.uToast.show({
									message: res.msg,
									complete() {
										uni.$emit('upStaffList', true)
										uni.navigateBack()
									}
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						})
					}
					
				})
			}
		},
	}
</script>

<style lang="scss" scoped>

</style>
